import React, { Component } from 'react'
import { Modal } from 'antd'
import { InfoCircleFilled } from '@ant-design/icons'
import { USER_INFO } from '@/Utils/CONST'

import './index.less'

const confirm = Modal.confirm

export default class TechnicalDocument extends Component {
    goBack = () => {
      this.props.history.goBack()
    }
    logoutTip = () => {
      confirm({
        className: 'common-confirm-small',
        icon: <InfoCircleFilled />,
        getContainer: () => document.getElementById('technical-document'),
        title: '确认退出登录吗?',
        onOk: () => {
        },
        onCancel() {

        },
      })
    }
    renderContent = (subTitle) => {
      const first = {
        'chaincodeId': '5c335117b54b4826f314ff5a',
        'channelId': '5bc9389760dc6449e9a832e4',
        'functionName': 'move',
        'args': [
          'a',
        ],
      }
      const third = {
        'errors': [
          {
            'message': 'Token Expired',
          },
        ],
      }
      const desc = '&#123;<br/>&nbsp;&nbsp;"code": 200,<br/>&nbsp;&nbsp;"status": "success",<br/>&nbsp;&nbsp;"data":<br/>&nbsp;"e611bb96163597e8ef55b1ff9aecfb1168d7ad1d3d7<br/>&nbsp;8ea11f5999a6afa62d9db",<br/>&nbsp;&nbsp;"msg": "success",<br/>&#125;'
      return (
        <React.Fragment>
          <div className="subtitle">{subTitle}</div>
          <div className="parameter">parameter</div>
          <div className="wrapper">
            <div className="header">
              <div className="left">Name</div>
              <div className="center">Description</div>
              <div className="right">Example Value</div>
            </div>
            <div className="body">
              <div className="left">
                                    chaincode
                <span className="required">*required</span>
                <div style={{ marginTop: 8 }} dangerouslySetInnerHTML={{ __html: '{body}' }}></div>
              </div>
              <div className="center">
                                    Invoke chaincode
                <div style={{ marginTop: 157 }}>
                                        Parameter content type: application/json
                </div>
              </div>

              <div className="right" style={{ lineHeight: '17px' }}>
                <pre>{JSON.stringify(first, null, 2)}</pre>
              </div>
            </div>
            <div className="header footer">
              <div className="left">Responses</div>
              <div className="center">Response content type: application/json</div>
            </div>
          </div>
          <div className="wrapper">
            <div className="header">
              <div className="left">Code</div>
              <div className="center">Description</div>
              <div className="right">Example Value</div>
            </div>
            <div className="body">
              <div className="left">
                                200
              </div>
              <div className="center">
                                Success

              </div>
              <div className="right" style={{ lineHeight: '17px' }} dangerouslySetInnerHTML={{ __html: desc }}/>
            </div>
            <div className="body" style={{ borderBottom: 0 }}>
              <div className="left">
                                401
              </div>
              <div className="center">
                                Unauthorized
              </div>
              <div className="right" style={{ lineHeight: '17px' }}>
                <pre>{JSON.stringify(third, null, 2)}</pre>
              </div>
            </div>
          </div>
        </React.Fragment>
      )
    }
    render() {
      const userInfo = JSON.parse(localStorage.getItem(USER_INFO) || '{}')
      const username = userInfo && userInfo.username
      return (
        <div id="technical-document" className="technical-document common">
          <div className="technical-document-header" id="technical-document-header">

            <div className="header-list">
              <div>
                <div className="technical-document-goback" onClick={() => this.goBack()} style={{ cursor: 'pointer' }}>
                  <img src={require('@/images/chaincode/返回.svg')} style={{ marginTop: -3 }} />
                                返回管理平台
                </div>
              </div>
              <div className="account">
                <img src={require('@/images/dashboard/me.svg')} />
                {username}
                <a onClick={this.logoutTip} className="logout">{'退出'}</a>
              </div>
            </div>
          </div>
          <div className="technical-document-content-wrap">
            <div className="technical-document-content">
              <div className="title">链码调用技术文档</div>
              {this.renderContent('1、Invoke chaincode')}
              {this.renderContent('2、Query chaincode')}
            </div>
          </div>
        </div >
      )
    }
}
